<template>
	<view class="wrap-x bg-white ">
		<view class="wrap-y" style="width: 50vw;">
			<view class="title">属性设置区</view>
			<view class="wrap-x row">
				<view class="label" style="font-weight: 550;">方块1:</view>
			</view>
			<view class="dashed">
				<view class="wrap-x row">
					<view class="label">背景色background:</view>
					<input v-model="bgColor" type="text" class="input " />
				</view>

				<view class="wrap-x margin-top-sm">
					<view class="wrap-x row">
						<view class="label">宽度width:</view>
						<uni-number-box v-model="width" type="number" class="input " />
					</view>
					<view class="wrap-x row">
						<view class="label">高度height:</view>
						<uni-number-box v-model="height" type="number" class="input " />
					</view>
				</view>
				<view class="wrap-x row margin-top-sm">
					<view class="label ">外边距margin</view>
				</view>
				<view class="wrap-x margin-top-sm">
					<view class="wrap-x row">
						<view class="label">上:</view>
						<uni-number-box v-model="margin1" type="number" class="input " />
					</view>
					<view class="wrap-x row">
						<view class="label">右:</view>
						<uni-number-box v-model="margin2" type="number" class="input " />
					</view>
					<view class="wrap-x row">
						<view class="label">下:</view>
						<uni-number-box v-model="margin3" type="number" class="input " />
					</view>
					<view class="wrap-x row">
						<view class="label">左:</view>
						<uni-number-box v-model="margin4" type="number" class="input " />
					</view>
				</view>
				<view class="wrap-x row margin-top-sm">
					<view class="label ">内边距padding</view>
				</view>
				<view class="wrap-x margin-tb-sm">
					<view class="wrap-x row">
						<view class="label">上:</view>
						<uni-number-box v-model="padding1" type="number" class="input " />
					</view>
					<view class="wrap-x row">
						<view class="label">右:</view>
						<uni-number-box v-model="padding2" type="number" class="input " />
					</view>
					<view class="wrap-x row">
						<view class="label">下:</view>
						<uni-number-box v-model="padding3" type="number" class="input " />
					</view>
					<view class="wrap-x row">
						<view class="label">左:</view>
						<uni-number-box v-model="padding4" type="number" class="input " />
					</view>
				</view>
			</view>
			<view class="wrap-x row margin-top-sm">
				<view class="label" style="font-weight: 550;">方块2:</view>
			</view>
			<view class="dashed">
				<view class="wrap-x row">
					<view class="label">背景色background:</view>
					<input v-model="bgColor2" type="text" class="input " />
				</view>

				<view class="wrap-x margin-top-sm">
					<view class="wrap-x row">
						<view class="label">宽度width:</view>
						<uni-number-box v-model="width2" type="number" class="input " />
					</view>
					<view class="wrap-x row">
						<view class="label">高度height:</view>
						<uni-number-box v-model="height2" type="number" class="input " />
					</view>
				</view>
				<view class="wrap-x row margin-top-sm">
					<view class="label ">外边距margin</view>
				</view>
				<view class="wrap-x margin-top-sm">
					<view class="wrap-x row">
						<view class="label">上:</view>
						<uni-number-box v-model="margin21" type="number" class="input " />
					</view>
					<view class="wrap-x row">
						<view class="label">右:</view>
						<uni-number-box v-model="margin22" type="number" class="input " />
					</view>
					<view class="wrap-x row">
						<view class="label">下:</view>
						<uni-number-box v-model="margin23" type="number" class="input " />
					</view>
					<view class="wrap-x row">
						<view class="label">左:</view>
						<uni-number-box v-model="margin24" type="number" class="input " />
					</view>
				</view>
				<view class="wrap-x row margin-top-sm">
					<view class="label ">内边距padding</view>
				</view>
				<view class="wrap-x margin-tb-sm">
					<view class="wrap-x row">
						<view class="label">上:</view>
						<uni-number-box v-model="padding21" type="number" class="input " />
					</view>
					<view class="wrap-x row">
						<view class="label">右:</view>
						<uni-number-box v-model="padding22" type="number" class="input " />
					</view>
					<view class="wrap-x row">
						<view class="label">下:</view>
						<uni-number-box v-model="padding23" type="number" class="input " />
					</view>
					<view class="wrap-x row">
						<view class="label">左:</view>
						<uni-number-box v-model="padding24" type="number" class="input " />
					</view>
				</view>
			</view>
			<view class="wrap-x margin-top-sm">
				<view class="wrap-x row">
					<view class="label " style="font-weight: 550;">边框border:</view>
					<uni-number-box v-model="border" type="number" class="input " />
				</view>
				<view class="wrap-x row">
					<view class="label" style="font-weight: 550;">边框背景色:</view>
					<input v-model="borderColor" type="text" class="input " />
				</view>

			</view>
			<view class="wrap-x row margin-top-sm">
				<view class="label" style="font-weight: 550;">圆角border-radiu:</view>
				<uni-number-box v-model="border_radiu" type="number" class="input " />
			</view>
			<view class="wrap-x row margin-top-sm">
				<view class="label " style="font-weight: 550;">阴影box-shadow</view>
			</view>
			<view class="wrap-x margin-top-sm">
				<view class="wrap-x row">
					<view class="label">阴影水平方向偏移:</view>
					<uni-number-box v-model="box_shadow1" type="number" class="input " />
				</view>
				<view class="wrap-x row">
					<view class="label">阴影竖直方向偏移:</view>
					<uni-number-box v-model="box_shadow2" type="number" class="input " />
				</view>

			</view>
			<view class="wrap-x margin-top-sm">

				<view class="wrap-x row">
					<view class="label">阴影颜色:</view>
					<input v-model="box_shadow4" type="text" class="input " />
				</view>

			</view>
			<view class="wrap-x margin-top-sm">
				<view class="wrap-x row">
					<view class="label">模糊距离:</view>
					<uni-number-box v-model="box_shadow3" type="number" class="input " />
				</view>
				<view class="wrap-x row">
					<view class="label">阴影的尺寸:</view>
					<uni-number-box v-model="box_shadow5" type="number" class="input " />
				</view>

			</view>
		</view>

		<view class="wrap-y" style="width:50vw;">
			<view class="title">布局效果预览区</view>
			<view class="wrap-x dashed" style="width: 90%;height: 75vh;margin: 20rpx;background-color: #eee;">
				<view :style="{width:width+'px',height:height+'px',background: bgColor,
				margin:margin1+'px '+margin2+'px '+margin3+'px '+margin4+'px ',padding:padding1+'px '+padding2+'px '+padding3+'px '+padding4+'px ',border:border+'px solid red',borderRadius:border_radiu+'px',
				boxShadow:box_shadow4 +' '+box_shadow1+'px '+box_shadow2+'px '+box_shadow3+'px '+box_shadow5+'px '}">
				</view>
				<view :style="{width:width2+'px',height:height2+'px',background: bgColor2,
				margin:margin21+'px '+margin22+'px '+margin23+'px '+margin24+'px ',padding:padding21+'px '+padding22+'px '+padding23+'px '+padding24+'px ',border:border+'px solid red',borderRadius:border_radiu+'px',
				boxShadow:box_shadow4 +' '+box_shadow1+'px '+box_shadow2+'px '+box_shadow3+'px '+box_shadow5+'px '}">
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		name: 'index',
		props: {},
		data() {
			return {

				bgColor: '#34daaa',
				bgColor2: '#ffaa7f',
				borderColor: '#ff5500',
				width: 200,
				height: 200,
				width2: 200,
				height2: 200,
				margin: 0,
				padding: 0,
				border: 0,
				border_radiu: 0,
				box_shadow1: 0,
				box_shadow2: 0,
				box_shadow3: 0,
				box_shadow4: '#000000',
				box_shadow5: 0,
				margin1: 0,
				margin2: 0,
				margin3: 0,
				margin4: 0,
				padding1: 0,
				padding2: 0,
				padding3: 0,
				padding4: 0,
				margin21: 0,
				margin22: 0,
				margin23: 0,
				margin24: 0,
				padding21: 0,
				padding22: 0,
				padding23: 0,
				padding24: 0,
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.title {
		font-weight: 600;
		color: red;
		font-size: 40rpx;
		text-align: center;
	}

	.row {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 30rpx;

		.label {
			font-size: 30rpx;
			color: black;
			margin-right: 20rpx;
		}

		.input {
			font-size: 30rpx;
			color: black;
			width: 80px;
			border: 1rpx solid #eee;
			padding: 8rpx 10rpx;
		}
	}
</style>